<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta name="keywords" content="宅音乐播放器，HTML5浮窗音乐播放器，网页音乐播放器，IT技术宅音乐博播放器"/>
    <meta name="description" content="宅音乐播放器，专注于网页端音乐播放，多列表，多专辑，更专业"/>
    <title>宅音乐播放器</title>
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="/static/css/index.css">
    <link rel="shortcut icon" href="favicon.ico">
    <!--<link rel="stylesheet" type="text/css" href="/player/css/player.css">-->
    <!--<link href="http://libs.baidu.com/fontawesome/4.2.0/css/font-awesome.css" rel="stylesheet" type="text/css">-->
</head>
<body class="fixed-nav">
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/"><img src="/static/images/logo_w.png" alt="logo" class="logo-img"></a>
        </div>
        <div class="collapse navbar-collapse" id="collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/">首页</a></li>
                <li><a target="_blank" href="https://lruihao.cn/posts/player.html">接入</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/admin/user/login" target="_blank"><i class="fa fa-user"></i> 登录</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="jumbotron">
    <div class="container">
        <h1>宅音乐播放器</h1>
        <p>一款方便快捷的HTML5音乐播放器</p>
        <p class="btn-group hidden-xs">
            <a class="btn btn-primary btn-lg" href="/admin/user/login" target="_blank"> 立即注册</a>
            <a class="btn btn-primary btn-lg" href="/admin/user/login" target="_blank"> 登录</a>
        </p>
        <p class="btn-group visible-xs">
            <a class="btn btn-primary btn-lg" href="/admin/user/login" target="_blank"> 立即注册</a>
            <a class="btn btn-primary btn-lg" href="/admin/user/login" target="_blank"> 登录</a>
        </p>
    </div>
</div>
<div class="container" id="con">
    <div class="row text-center">
        <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
            <img src="/static/images/lrc.png" alt="describe image" class="desc img-responsive">
            <h3>LRC歌词</h3>
            <p>歌词实时同步，麻麻再也不怕我听不懂歌词了</p>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
            <img src="/static/images/list.png" alt="describe image" class="desc img-responsive">
            <h3>多列表功能</h3>
            <p>多个列表随心换，想听哪个就听哪个，就这么任性！</p>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
            <img src="/static/images/mode.png" alt="describe image" class="desc img-responsive">
            <h3>多种播放模式</h3>
            <p>随机、列表、循环、单曲四种播放模式随心切换，最接近客户端的体验！</p>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
            <img src="/static/images/style.png" alt="describe image" class="desc img-responsive">
            <h3>样式自定义</h3>
            <p>这可能是最方便二次开发的音乐播放器插件了。</p>
        </div>
    </div>
    <h2>未来可能会添加的功能</h2>
    <div class="table-responsive">
        <table class="table table-hover table-striped">
            <tr>
                <th>功能</th>
                <th>状态</th>
            </tr>
            <tr>
                <td>播放记忆</td>
                <td>制作中</td>
            </tr>
            <tr>
                <td>快捷键绑定</td>
                <td>未开工</td>
            </tr>
            <tr>
                <td>移动端优化</td>
                <td>未开工</td>
            </tr>
            <tr>
                <td>兼容低版本IE</td>
                <td>未开工</td>
            </tr>
        </table>
    </div>
</div>
<footer class="bg-bottom">
    <div class="container">
        <p class="pull-right">
            <a href="#"><span class="fa fa-arrow-circle-up fa-3x"></span></a>
        </p>
        <div class="copy">
            <p>&copy;2019 <a href="https://lruihao.cn" target="_blank">博採眾長</a></p>
            <p>Powered By <a target="_blank" href="https://getbootstrap.com">Bootstrap</a></p>
        </div>
    </div>
</footer>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script id="ilt" src="https://player.lruihao.cn/player/js/player.js" key="f94ee8d6f6404a1e8ae0cff6fd05f98e"></script>
</body>
</html>